<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" value=""/><label for="">手机名字</label>
			<my-chil></my-chil>
		</div>
		<tempalte id="chil">
			<div>
				<p>{{defdata.name}}</p>
				<p>{{defdata.type}}</p>
				<p>{{defdata.price}}</p>
			</div>
		</tempalte>
		<script type="text/javascript">
			Vue.component('my-Chil',{
				template:"#chil",
				props:['name'],
				data:{
					return{
						data:[{name:"华为",price:2999,type:'9x pro'},
						{name:"小米",price:1999,type:'mi9 pro'},
						{name:"荣耀",price:3999,type:'10x pro'}],
						defdata:{name:'',price:0,type:''}
					}
					
				},
				
				watch:{
					name(){
						if(this.$props.name){
							console.log(this.$props.name);
						}
					}
				}
			})
			var vm = new Vue({
				el:'#app',
				phoName:''
			})
		</script>
	</body>
</html>
